<template>
	<gui-page class="container" :customFooter="true" :customHeader="true">
		<template v-slot:gHeader>
			<view style="height:44px;" class="gui-flex gui-nowrap gui-rows gui-align-items-center">
				<!-- 返回按钮 -->
				<gui-header-leading :backButtonClass="['gui-color-white']" :home="false"></gui-header-leading>
				<!-- 导航文本此处也可以是其他自定义内容 -->
				<text class="gui-h6 gui-flex1 gui-ellipsis gui-text-center gui-header-content gui-color-white">会议室</text>
				<view style="width:60rpx;"></view>
			</view>
		</template>
		<!-- 请开始您的开发 ~ -->
		<template v-slot:gBody>
			<view class="gui-padding">
				<view class="daily_time" >
					<view style="position: relative;top: 30rpx;padding-left: 20rpx;padding-right: 20rpx;">
						<text style="color: rgb(109,124,149);">我的会议</text>
						
					</view>
					<view style="margin-top: 30px;padding-left: 20rpx;padding-right: 20rpx;margin-bottom: 65px;">
						<view class="xtb">
							<view style="position: relative;top: 2px;">今天</view>
						</view>
						<view style="float: left;margin-left: 470rpx;">3项</view>
					</view>
					<view class="item" v-for="item in list">
						<!--左侧图标-->
						<view class="item-tb"></view>
						<!--右侧文字-->
						<view class="item-txt">
							<view class="line">{{item.remarks}}</view>
							<view class="line">{{item.startTime}}-{{item.endTime}}</view>
							<view class="line">{{item.room.name}}</view>
						</view>
					</view>
					
					
				</view>
				
			</view>
		</template>

		<template v-slot:gFooter>
			<view class="gui-padding">
				<view>
					<button @click="subMeet" type="default" class="gui-button gui-bg-blue gui-noborder">
						<text class="gui-color-white gui-button-text">预约会议室</text>
					</button>
				</view>
			</view>

		</template>
	</gui-page>
</template>

<script>
	import graceChecker from "@/Grace6/js/checker.js";
	import graceJS from "@/Grace6/js/grace.js";
	import BASE_URL from '@/config/api.js'
	export default {
		data() {
			return {
				winHeight:null,
				list:[]
			}
		},
		onLoad: function() {
			// 获取页面高度
			var system = uni.getSystemInfoSync();
			this.winHeight=system.windowHeight
			console.log(system.windowHeight)
			this.getList()
			
		},
		methods: {
			subMeet(){
				graceJS.navigate('/pages/meetSub/meetSub', 'navigateTo');
			},
			getList(){
				
				var token = graceJS.getStorage('token');
				var userId = graceJS.getStorage('userId');
				graceJS.get(
					BASE_URL + '/display/reservation/reservation/list', 
					{},
					{Token:token},
					(res) => {
						
						
						this.list=res.page.list
						
					},
					(e) => {
						console.log(e);
					}
				);
				
			},
		}
	}
</script>

<style scoped>
	.item-tb{
		background-image: url(../../static/img/Iconly-Bold-2 User.png);
		background-size: cover;
		background-repeat: no-repeat;
		width: 33px;
		height: 33px;
		float: left;
		margin-left: 20px;
		margin-top: 30px;
	}
	.item-txt{
		float: left;
		margin-top: 15px;
		margin-left: 30px;
	}
	.item-txt .line{
		color: rgb(63,76,152);
		font-size: 14px;
		margin-top: 3px;
	}
	.container {
		background-image: url(../../static/img/bj.png);
		background-size: cover;
		background-repeat: no-repeat;
	}

	.text {
		text-align: center;
		font-size: 20px;
		font-weight: 500;
		color: rgb(12, 37, 78);
		margin-top: 100rpx;
	}
	.daily_time{
		background-color: white;
		
		margin-top: 40rpx;
		border-radius: 0.5rem;
		padding-bottom: 30px;
	}
	.xtb{
		width: 44px;
		height: 21px;
		background-image: url(../../static/img/jt.png);
		background-size: cover;
		background-repeat: no-repeat;
		color: white;
		font-size: 12px;
		text-align: center;
		float: left;
		
	}
	.item{
		background-color: rgb(245,246,250);
		margin-top: 20px;
		border-radius: 0.5rem;
		height: 90px;
		margin-left: 20rpx;
		margin-right: 20rpx;
	}
</style>